import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import PropTypes from 'prop-types'

import './index.css'

export default class Header extends Component {

  static propTypes={
    addTodo:PropTypes.func.isRequired,
  }

  handleKeyUp=(e)=>{
    const {keyCode,target}=e
    if(keyCode!==13) return
    if(keyCode===13){
      if(target.value.trim()===''){
        alert('输入不能为空')
        return
      }
      let id=nanoid()
      let content=target.value
      this.props.addTodo({id,content,isDone:false})
      target.value=''
    }
  }

  render() {
    return (
      <div className='header'>
        <input type="text" onKeyUp={this.handleKeyUp} placeholder='输入你的任务名称，回车确认'/>
      </div>
    )
  }
}
